MARKETPLACE
PLUGINS
MESSAGE COMPOSER | ZAPTAG
Message Composer | ZapTag logo

Message Composer | ZapTag

Published June 2025
   •    Updated June 2025

Plugin details

🇧🇷 Português ---------------------------------------------------------------------------
✨ Editor Inteligente de Input (Message Composer) ✨
❌ Chega de workflows complexos e :find & replace em cadeia!

O Message Composer é um componente de interface completo para o Bubble que permite a você (ou a seus usuários) criar e gerenciar modelos de texto dinâmicos com uma experiência de usuário profissional e intuitiva, imitando a interface do WhatsApp.

Ideal para criar lembretes de cobrança, notificações personalizadas ou qualquer comunicação que precise de variáveis dinâmicas.

Funcionalidades Principais
🎨 Editor Estilizado: Uma caixa de texto que simula um balão de conversa do WhatsApp.
🏷️ Botões de Tags Dinâmicas: Gera botões clicáveis automaticamente a partir de uma lista de variáveis (um Option Set) que você define.
✍️ Formatação WhatsApp: Botões de "Negrito" e "Itálico" que funcionam como um 'liga/desliga', envolvendo o texto selecionado com *asteriscos* e _underlines_, exatamente como na formatação do WhatsApp.
🎯 Inserção Inteligente: Clicar em uma tag ou botão de formatação insere o texto na posição exata do cursor.
⚡ Saída de Dados em Tempo Real: O conteúdo de texto puro do editor fica sempre disponível no estado exposto valor_do_texto, pronto para ser salvo.

Página DEMO
https://bubble.io/page?id=smart-template-input&tab=Design&name=index

🇬🇧 English
---------------------------------------------------------------------------
✨ Messager Composer ✨
❌ No more complex workflows and chained :find & replace!

The Message Composer is a complete UI component for Bubble that allows you or your users to create and manage dynamic text templates with a professional and intuitive UX, mimicking the WhatsApp chat interface.

Ideal for creating payment reminders, personalized notifications, or any communication that requires dynamic variables.

Core Features
🎨 Styled Editor: A text area styled to look like a WhatsApp chat bubble.
🏷️ Dynamic Tag Buttons: Automatically generates clickable buttons from a list of variables (an Option Set) that you provide.
✍️ WhatsApp Formatting: "Bold" and "Italic" buttons that toggle WhatsApp's markdown formatting (*bold*, _italic_) on the selected text.
🎯 Smart Insertion: Clicking a tag or formatting button inserts the text/characters at the user's current cursor position.
⚡ Real-Time Output: The raw text content of the editor is always available in the valor_do_texto exposed state, ready to be saved.

DEMO PAGE
https://bubble.io/page?id=smart-template-input&tab=Design&name=index

🇪🇸 Español
---------------------------------------------------------------------------
✨ Editor Inteligente de Plantillas (Messager Composer) ✨
❌ ¡No más flujos de trabajo complejos ni :find & replace en cadena!

El Editor Inteligente de Plantillas es un componente de interfaz completo para Bubble que te permite a ti (o a tus usuarios) crear y gestionar plantillas de texto dinámicas con una experiencia de usuario profesional e intuitiva, imitando la interfaz de chat de WhatsApp.

Es ideal para crear recordatorios de pago, notificaciones personalizadas o cualquier comunicación que requiera variables dinámicas.

Características Principales
🎨 Editor Estilizado: Un área de texto con el estilo de una burbuja de chat de WhatsApp.
🏷️ Botones de Etiquetas Dinámicas: Genera automáticamente botones clicables a partir de una lista de variables (un Option Set) que tú proporcionas.
✍️ Formato de WhatsApp: Botones de "Negrita" e "Itálica" que activan/desactivan el formato markdown de WhatsApp (*negrita*, _cursiva_) en el texto seleccionado.
🎯 Inserción Inteligente: Al hacer clic en una etiqueta o botón de formato, el texto se inserta en la posición exacta del cursor.
⚡ Resultado en Tiempo Real: El contenido de texto puro del editor está siempre disponible en el estado expuesto valor_do_texto, listo para ser guardado.

DEMOSTRACIÓN
https://bubble.io/page?id=smart-template-input&tab=Design&name=index

$34

One time

stars   •   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Daniel Sena logo
Daniel Sena
Joined 2023   •   1 Plugin
View contributor profile

Instructions

.🚀 Guia de Instalação e Uso ---------------------------------------------------------------------------
Instale o Plugin e arraste o elemento "Editor de Modelo com Tags" para sua página.

Crie um Option Set com suas variáveis. Vá em Data > Option sets e crie um novo set (ex: Variaveis) com todas as suas tags como opções (ex: {cliente}, {valor_parcela}, etc.).

Configure a Fonte de Variáveis (Passo Mais Importante):

Selecione o elemento do plugin na sua página.
Na propriedade Fonte de Variáveis, insira a seguinte expressão dinâmica:
Get VariaveisDeMensagem's All options:each item's Display
Isso converte seu Option Set em uma lista de textos, que é o formato que o plugin espera.
Configure o Conteúdo Inicial:

No campo Conteúdo Inicial, vincule um campo do seu banco de dados. Ex: Current User's modelo_de_mensagem.
Salve o Resultado:

No workflow do seu botão "Salvar", você pode configurar um :find&replace para substituir cada variável dentro das {chaves}


.
🚀 Quick Setup Guide
---------------------------------------------------------------------------
Install the Plugin and drag the "Editor de Modelo com Tags" element onto your page.
Create an Option Set with your variables (e.g., TemplateVariables) in the Data > Option sets tab. Add your tags like {client}, {amount}, etc.
Set up the Variable Source (Most Important Step):
Select the plugin element on your page.
In the Fonte de Variáveis property, enter the following dynamic expression:
Get TemplateVariables's All options:each item's Display
This converts your Option Set into a list of texts, which is the format the plugin expects.
Set the Initial Content: Bind the Conteúdo Inicial field to a field in your database, e.g., Current User's saved_template.
Save the Result: In your "Save" button's workflow, you can use the :find&replace action to replace the variables between {braces}


🚀 Guía de Configuración Rápida
--------------------------------------------------------------------------
Instala el Plugin y arrastra el elemento "Editor de Modelo com Tags" a tu página.
Crea un Option Set con tus variables (ej: VariablesPlantilla) en la pestaña Data > Option sets. Añade tus etiquetas como {cliente}, {monto}, etc.
Configura la Fuente de Variables (El Paso Más Importante):
Selecciona el elemento del plugin en tu página.
En la propiedad Fonte de Variáveis, introduce la siguiente expresión dinámica:
Get VariablesPlantilla's All options:each item's Display
Esto convierte tu Option Set en una lista de textos, que es el formato que el plugin espera.
Configura el Contenido Inicial: Vincula el campo Conteúdo Inicial a un campo de tu base de datos (ej: Current User's plantilla_guardada).
Guarda el Resultado: En el workflow de tu botón "Guardar", utiliza la acción Make changes to a thing... para guardar el valor del estado expuesto del plugin:

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Productivity   •   Email   •   Customer Support   •   Small Business   •   Ecommerce   •   Input Forms

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales